import React from 'react';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import BaseScreen from '../pages/preview/base-screen';
import ProductScreen from '../pages/preview/product-screen';
import OtherScreen from '../pages/preview/other-screen';
import ThemeStyles from '../styles';
import {getRealSize, Touchable} from '../utils';
import {Platform, Text, View} from 'react-native';
import {I18n} from '../reducers/intl';

const PreviewNavigator = createMaterialTopTabNavigator(
  {
    PreviewBaseTab: BaseScreen,
    PreviewProductTab: ProductScreen,
    PreviewOtherTab: OtherScreen,
  },
  {
    initialRouteName: 'PreviewBaseTab',
    lazy: true,
    navigationOptions: ({navigation}) => ({
      headerBackTitleStyle: Platform.OS === 'ios' && {
        height: 0,
        width: 0,
      },
      title: I18n.t('page.title.preview'),
      headerRight: () => {
        return (
          <Touchable onPress={() => navigation.getParam('submit')()}>
            <View
              style={[
                ThemeStyles.Layout.base.padding,
                {height: getRealSize(48)},
              ]}>
              <Text style={[ThemeStyles.Front.base]}>
                {I18n.t('button.submit')}
              </Text>
            </View>
          </Touchable>
        );
      },
    }),
    tabBarOptions: {
      indicatorStyle: {
        ...ThemeStyles.Color.background.primary,
      },
      activeTintColor: ThemeStyles.Color.primary.color,
      inactiveTintColor: ThemeStyles.Color.text.tintGray.color,
      style: {
        ...ThemeStyles.Color.background.white,
      },
    },
  },
);

export default PreviewNavigator;
